<template>
    <div class="loginWrapper">
        <div class="modal">
            <el-form :model="user" :rules="rules" ref="userFormRef">
                <div class="title">guda~</div>
                <el-form-item>
                    <el-input v-model="user.userName" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="user.userPwd" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn" @click="login(userFormRef)">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance();
// proxy劫持对象 可以找到$api

let user = reactive({ userName: 'admin', userPwd: '123456' });
let rules = reactive({
    userName: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        },
    ],
    userPsd: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
    ],
});
let userFormRef = ref(null);
const login = formRef => {
    formRef.validate(async vaild => {
        // 根据刚刚设置的rules去匹配，都满足返回ture
        // 只要有一个不满足就返回false
        if (vaild) {
            //发送请求
            proxy.$api.login(user).then(userInfo => {
                store.commit('saveUserInfo', userInfo);
                router.push('/welcome');
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.loginWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    .modal {
        width: 500px;
        padding: 50px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px 3px #ddd;
        .title {
            text-align: center;
            font-size: 50px;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        .btn {
            width: 100%;
        }
    }
}
</style>
